<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 

        1. 当依赖数据发生变化，会自动更新（重新执行了它自身定义的那个函数）
        2. 依赖数据没有发生变化，函数不会重新执行，有缓存。

     -->

    <div id="app">
        <h1>购物车列表</h1>
        <button @click="count++">count + 1 ---- {{ count }}</button>
        <button @click="changePrice">修改小米的价格为 1 元</button>
        <table>
            <tbody>
                <tr v-for="good in cartList" :key="good.goodId">
                    <td>
                        <input type="checkbox" v-model="checkedGoodIds" :value="good.goodId" />
                    </td>
                    <td>{{ good.goodId }}</td>
                    <td>{{ good.goodName }}</td>
                    <td>{{ good.goodPrice }}</td>
                    <td>{{ good.goodNum }}</td>
                    <td>{{ good.goodPrice * good.goodNum }}</td>
                    <td>
                        <button>-</button>
                        <button>+</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <p>勾选的总价 - methods：{{ calcTotal() }}</p>

        <p>勾选的总价 - computed: {{ total }}</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                count: 1,
                checkedGoodIds: [],
                cartList: [
                    { goodId: 1, goodName: '小米', goodPrice: 100, goodNum: 10 },
                    { goodId: 2, goodName: '华为', goodPrice: 200, goodNum: 20 }
                ],
            },
            computed: {
                total() {
                    // 找依赖
                    //      1. this.cartList
                    //      2. this.checkedGoodIds
                    console.log('computed - total');
                    const price = this.cartList
                    .filter((item) => {
                        return this.checkedGoodIds.includes(item.goodId)
                    }).reduce((total, item) => {
                        // 计算小计
                        const a = item.goodNum * item.goodPrice
                        return total += a
                    }, 0)

                    return price
                }
            },
            methods: {
                calcTotal() {
                    console.log('methods - calcTotal');
                    const price = this.cartList
                    .filter((item) => {
                        return this.checkedGoodIds.includes(item.goodId)
                    }).reduce((total, item) => {
                        // 计算小计
                        const a = item.goodNum * item.goodPrice
                        return total += a
                    }, 0)

                    return price
                },
                changePrice() {
                    this.$set(this.cartList, 0, {
                        ...this.cartList[0],
                        goodPrice: 1
                    })
                    // 对象合并
                    // var a = { name: '张三', sex: '男', address: '1111' }
                    // var b = { age: 18, name: '里斯' }

                    // // { name: '张三', age: 18 }
                    // var c = {
                    //     ...a,
                    //     ...b
                    // }
                }
            }
        })
    </script>
</body>

</html>